<template>
  <div>
    <el-dialog
      :visible.sync="dialog.add"
      :close-on-click-modal="false"
      title="添加"
      width="80%"
      append-to-body
      @closed="dialogClosed('addForm')"
    >
      <el-form ref="addForm" :model="form" label-width="120px" :rules="validateRules">
        <el-row>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="英文" prop="dictCode">
              <el-input v-model="form.dictCode" placeholder="请输入英文" disabled clearable />
              <!-- <el-button
                type="text"
                size="small"
                @click="showJoinSearch({
                  searchDialog: 'DataDictMain'
                })"
              >选择英文</el-button> -->
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="中文" prop="dictName">
              <el-input v-model="form.dictName" placeholder="请输入中文" disabled clearable />
              <el-button v-if="chooseDataDict"
                type="text"
                size="small"
                @click="showJoinSearch({
                  searchDialog: 'DataDictMain'
                })"
              >选择中文</el-button>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="值" prop="value">
              <el-input-number
                v-model="form.value"
                placeholder="请输入值"
                clearable
                style="width: 100%;"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="显示值" prop="displayValue">
              <el-input v-model="form.displayValue" placeholder="请输入显示值" clearable />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="排序" prop="itemOrder">
              <el-input-number
                v-model="form.itemOrder"
                placeholder="请输入排序"
                clearable
                style="width: 100%;"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="显示颜色" prop="color">
              <el-input v-model="form.color" placeholder="请输入显示颜色" clearable />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="是否默认" prop="isDefault">
              <el-select
                v-model="form.isDefault"
                placeholder="请选择是否默认"
                clearable
                style="width: 100%;"
              >
                <el-option
                  v-for="item in selects.isDefaultSelect"
                  :key="item.value"
                  :value="item.value"
                  :label="item.displayValue"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-form-item label="描述" prop="description">
              <el-input v-model="form.description" type="textarea" placeholder="请输入描述" clearable />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer">
        <el-button @click="dialog.add = false">取消</el-button>
        <el-button type="primary" :loading="loading.add" @click="add">添加</el-button>
      </div>
    </el-dialog>
    <el-dialog
      :visible.sync="dialog.edit"
      :close-on-click-modal="false"
      title="修改"
      width="80%"
      append-to-body
      @closed="dialogClosed('editForm')"
    >
      <el-form ref="editForm" :model="form" label-width="120px" :rules="validateRules">
        <el-row>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="英文" prop="dictCode">
              <el-input v-model="form.dictCode" placeholder="请输入英文" disabled clearable />
              <!-- <el-button
                type="text"
                size="small"
                @click="showJoinSearch({
                  searchDialog: 'DataDictMain'
                })"
              >选择英文</el-button> -->
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="中文" prop="dictName">
              <el-input v-model="form.dictName" placeholder="请输入中文" disabled clearable />
              <!-- <el-button
                type="text"
                size="small"
                @click="showJoinSearch({
                  searchDialog: 'DataDictMain'
                })"
              >选择中文</el-button> -->
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="值" prop="value">
              <el-input-number
                v-model="form.value"
                placeholder="请输入值"
                clearable
                style="width: 100%;"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="显示值" prop="displayValue">
              <el-input v-model="form.displayValue" placeholder="请输入显示值" clearable />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="排序" prop="itemOrder">
              <el-input-number
                v-model="form.itemOrder"
                placeholder="请输入排序"
                clearable
                style="width: 100%;"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="显示颜色" prop="color">
              <el-input v-model="form.color" placeholder="请输入显示颜色" clearable />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="是否默认" prop="isDefault">
              <el-select
                v-model="form.isDefault"
                placeholder="请选择是否默认"
                clearable
                style="width: 100%;"
              >
                <el-option
                  v-for="item in selects.isDefaultSelect"
                  :key="item.value"
                  :value="item.value"
                  :label="item.displayValue"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-form-item label="描述" prop="description">
              <el-input v-model="form.description" type="textarea" placeholder="请输入描述" clearable />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer">
        <el-button @click="dialog.edit = false">取消</el-button>
        <el-button type="primary" :loading="loading.edit" @click="edit">修改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as utils from '@/utils/utils'
import * as ResponseStatus from '@/utils/response-status'
import UploadImage from '@/components/Upload/UploadImage'
import Tinymce from '@/components/Tinymce'
const resUrl = process.env.VUE_APP_RES_URL
export default {
  name: 'DataDictItemAddEdit',
  components: {
    UploadImage,
    Tinymce
  },
  data() {
    return {
      dialog: {
        add: false,
        edit: false
      },
      loading: {
        add: false,
        edit: false
      },
      form: {
        dictId: undefined,
        dictCode: undefined,
        dictName: undefined,
        dictIsActive: undefined,
        value: undefined,
        displayValue: undefined,
        itemOrder: undefined,
        color: undefined,
        isDefault: undefined,
        description: undefined
      },
      validateRules: {
        dictId: [
          {
            type: 'integer',
            required: true,
            message: '此项为必须项',
            trigger: 'blur, change'
          }
        ],
        dictCode: [
          {
            type: 'string',
            required: true,
            message: '此项为必须项',
            trigger: 'blur'
          },
          {
            type: 'string',
            min: 1,
            max: 50,
            message: '必须1-50个字符',
            trigger: 'blur'
          }
        ],
        dictName: [
          {
            type: 'string',
            required: true,
            message: '此项为必须项',
            trigger: 'blur'
          },
          {
            type: 'string',
            min: 1,
            max: 50,
            message: '必须1-50个字符',
            trigger: 'blur'
          }
        ],
        dictIsActive: [
          {
            type: 'integer',
            required: true,
            message: '此项为必须项',
            trigger: 'blur, change'
          }
        ],
        value: [
          {
            type: 'integer',
            required: true,
            message: '此项为必须项',
            trigger: 'blur, change'
          }
        ],
        displayValue: [
          {
            type: 'string',
            required: true,
            message: '此项为必须项',
            trigger: 'blur'
          },
          {
            type: 'string',
            min: 1,
            max: 50,
            message: '必须1-50个字符',
            trigger: 'blur'
          }
        ],
        itemOrder: [
          {
            type: 'integer',
            required: true,
            message: '此项为必须项',
            trigger: 'blur, change'
          }
        ],
        color: [
          {
            type: 'string',
            min: 1,
            max: 20,
            message: '必须1-20个字符',
            trigger: 'blur'
          }
        ],
        description: [
          {
            type: 'string',
            min: 1,
            max: 500,
            message: '必须1-500个字符',
            trigger: 'blur'
          }
        ]
      },
      dataDictCodes: ['YES_NO'],
      selects: {
        dictIsActiveSelect: [],
        isDefaultSelect: [],
      },
      chooseDataDict: true,
      excludeResetProps: [],
      resUrl: resUrl
    }
  },
  computed: {},
  mounted() {
    this.initDataDict()
    utils
      .getDataDict(this.dataDictCodes)
      .then(response => {
        if (response) {
          // utils.getSelectDictItems({
          //   mainComponent: this,
          //   dataDictItems: response,
          //   dictCode: 'YES_NO',
          //   formProp: 'dictIsActive',
          //   dataProp: 'dictIsActiveSelect'
          // })
          utils.getSelectDictItems({
            mainComponent: this,
            dataDictItems: response,
            dictCode: 'YES_NO',
            formProp: 'isDefault',
            dataProp: 'isDefaultSelect'
          })
        }
      })
      .catch(error => {})
  },
  methods: {
    initDataDict() {

    },
    dialogClosed(formRef) {
       if (this.excludeResetProps.length > 0) {
        // 有不需要被清空的数据
        let oldForm = JSON.parse(JSON.stringify(this.form))
        this.$refs[formRef].resetFields()
        for (let key in this.form) {
          this.form[key] = undefined
        }
        this.excludeResetProps.forEach(key => {
          this.form[key] = oldForm[key]
        })
      } else {
        this.$refs[formRef].resetFields()
        for (let key in this.form) {
          this.form[key] = undefined
        }
      }
    },
    add() {
      this.$emit('add')
    },
    edit() {
      this.$emit('edit')
    },
    /** 触发父组件展示关联表数据的搜索对话框 */
    showJoinSearch(options) {
      this.$emit('showJoinSearchDialog', options)
    },
    imgUploadSuccess(formProp, url) {
      this.form[formProp] = url
    },
    imgRemoveSuccess(formProp) {
      this.form[formProp] = undefined
    }
  }
}
</script>

<style>
</style>
